<template>
  <div class="login-page">
    <div class="forget-password">
      <span class="forget"
            @click="onForgetBtn">忘记密码</span>
    </div>
    <div class="login-logo"></div>
    <div class="login-inp">
      <div class="user-name">
        <i class="iconfont icon-yonghu"></i>
        <input type="number"
               v-model="username"
               placeholder="请输入手机号...">
        <p>{{userInspect}}</p>
      </div>
      <div class="password">
        <i class="iconfont icon-icon--copy"></i>
        <input type="password"
               v-model="password"
               placeholder="请输入密码...">
        <p>{{passInspect}}</p>
      </div>
    </div>
    <div class="login-btn"
         @click="onLoginHandle">
      登 录
    </div>
    <div class="register-btn">
      <p @click="onRegisterBtn">立即注册</p>
    </div>
    <Err-Hint v-if="hint"
              :errInfo="errInfo"></Err-Hint>
  </div>
</template>

<script>
import ErrHint from '@/commonCom/errHint'
export default {
  name: 'Login',
  components: {
    ErrHint
  },
  data () {
    return {
      username: '',
      password: '',
      hint: false,
      userInspect: null,
      passInspect: null,
      errInfo: {}
    }
  },
  created () {

  },
  mounted () {
    // document.cookie = window.localStorage.getItem('cookies')
    this.$http.get(`${this.baseUrl.needAuth}`).then((res) => {
      if (res.data.data) {
        this.$router.push('./Home')
      } else {
        this.$router.push('/')
      }
    })
  },
  methods: {
    setCookie (cname, cvalue, exdays) {
      var d = new Date()
      d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000))
      var expires = ';expires=' + d.toGMTString()
      // document.cookie = cname + '=' + cvalue + expires
      // document.cookie = "'" + cname + '=' + cvalue + ';expires=' + d.toGMTString() + "'"

      window.localStorage.setItem('cookies', cname + '=' + cvalue + expires)
    },
    onLoginHandle () {
      let url = `${this.baseUrl.login}`
      if (this.username === '') {
        this.userInspect = '* 手机号不能为空'
      } else if (this.password === '') {
        this.passInspect = '* 密码不能为空'
      } else {
        let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
        let regPass = /^(?![0-9]+$)(?![a-zA-Z]$)[0-9A-Za-z]{8,16}$/
        if (!reg.test(this.username)) {
          this.userInspect = '* 请输入正确的手机号'
        } else if (!regPass.test(this.password)) {
          this.passInspect = '* 请输入正确格式密码'
        } else {
          this.$http.post(url, { phone: this.username, password: this.password }).then((res) => {
            if (res.data.code === 200) {
              // this.setCookie('JSESSIONID', res.data.data, 365)
              this.$store.commit('editUserName', this.username)
              this.$router.push('./Home')
            }
          }, (reject) => {
            this.errInfo = {
              text: '登录失败'
            }
            this.hint = true
            setTimeout(() => {
              this.hint = false
            }, 1000)
          })
        }
      }
    },
    onRegisterBtn () {
      this.$router.push('./Register')
    },
    onForgetBtn () {
      this.$router.push('./Register')
    }
  },
  watch: {
    username: function () {
      this.userInspect = null
    },
    password: function () {
      this.passInspect = null
    }
  }
}
</script>

<style lang="stylus" scoped>
.login-page {
  .forget-password {
    padding: 0.2rem 0.4rem;
    color: $color;
    font-size: 0.32rem;
    text-align: right;
  }

  .login-logo {
    width: 2.74rem;
    height: 2.74rem;
    margin: 1.48rem auto 0.8rem;
    background-image: url('../../static/images/login/login.png');
    background-size: 100% 100%;
  }

  .login-inp {
    position: relative;
    text-align: center;

    &>div {
      position: relative;
    }

    .password {
      margin: 0.6rem 0 1.1rem;
    }

    input {
      width: 6.06rem;
      height: 0.8rem;
      background-color: #f6f5f5;
      text-indent: 0.8rem;
      border-radius: 2px;
    }

    i {
      position: absolute;
      padding-left: 0.2rem;
      top: 0.175rem;
      font-size: 0.45rem;
      color: #999999;
    }

    p {
      position: absolute;
      left: 50%;
      width: 6.06rem;
      margin-left: -3.03rem;
      padding-top: 0.2rem;
      text-align: left;
      color: $color;
    }
  }

  .login-btn {
    width: 6.06rem;
    height: 0.9rem;
    line-height: 0.9rem;
    margin: 0 auto;
    border: 1px solid $color;
    border-radius: 2px;
    color: $color;
    text-align: center;
    font-weight: 800;
    font-size: 0.36rem;
  }

  .register-btn {
    margin-top: 0.4rem;
    text-align: center;

    p {
      display: inline-block;
      width: 140px;
      height: 40px;
      line-height: 40px;
      letter-spacing: 2px;
      font-size: 0.36rem;
      color: $color;
    }
  }
}
</style>
